import ReactDOM from 'react-dom'
// 引入图片要如下的方式
import avatar from './avatar.png'
import './index.css'

const state = {
  // hot: 热度排序  time: 时间排序
  tabs: [
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ],
  active: 'time',
  list: [
    {
      id: 1,
      author: '刘德华',
      comment: '给我一杯忘情水',
      time: '2021-11-10 09:09:00',
      img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
    },
    {
      id: 2,
      author: '周杰伦',
      comment: '听妈妈的话',
      time: '2021-12-11 09:09:00',
      img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    },
    {
      id: 3,
      author: '陈奕迅',
      comment: '十年',
      time: '2021-10-11 10:09:00',
      img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
    },
  ],
}

const commentList = (
  <div className='App'>
    <div className='comment-container'>
      <div className='comment-head'>
        {/* //!#1 评论长度 */}
        <span>{state.list.length} 评论</span>
      </div>
      <div className='tabs-order'>
        <ul className='sort-container'>
          {/* //!#2 渲染 Tab 栏 */}
          {/* 当 item.type 等于 state.active 的时候，使用 on class */}
          {state.tabs.map((item) => (
            <li
              key={item.id}
              className={item.type === state.active ? 'on' : ''}
            >
              按{item.name}排序
            </li>
          ))}
        </ul>
      </div>
      <div className='comment-send'>
        <div className='user-face'>
          <img className='user-head' src={avatar} alt='' />
        </div>
        <div className='textarea-container'>
          <textarea
            cols={80}
            rows={5}
            placeholder='发条友善的评论'
            className='ipt-txt'
          ></textarea>
          <button className='comment-submit'>发表评论</button>
        </div>
        <div className='comment-emoji'>
          <i className='face'></i>
          <span className='text'>表情</span>
        </div>
      </div>
      <div className='comment-list'>
        {state.list.map((item) => (
          <div key={item.id} className='list-item'>
            <div className='user-face'>
              <img className='user-head' src={item.img} alt='' />
            </div>
            <div className='comment'>
              <div className='user'>{item.author}</div>
              <p className='text'>{item.comment}</p>
              <div className='info'>
                <span className='time'>{item.time}</span>
                {/* 第 1 种写法 */}
                <span className={`like ${item.attitude === 1 ? 'liked' : ''}`}>
                  {/* 第 2 种写法 */}
                  {/* <span
                  className={'like ' + (item.attitude === 1 ? 'liked' : '')}
                > */}
                  {/* 第 2 种写法 */}
                  {/* <span
                  className={['like', item.attitude === 1 ? 'liked' : ''].join(
                    ' '
                  )}
                > */}
                  <i className='icon'></i>
                </span>
                <span className={`hate ${item.attitude === -1 ? 'hated' : ''}`}>
                  <i className='icon'></i>
                </span>
                <span className='reply btn-hover'>删除</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
)
// 渲染谁、渲染到哪里
ReactDOM.render(commentList, document.querySelector('#root'))
